<template>
    <div class="mainSty">
        <div class="min_tit_sty flex_ard">
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.surplusCoin }}</div>
                <div>剩余户币</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.couponNum }}</div>
                <div>下载券</div>
            </div>
        </div>
        <!-- 测试git提交 -->
        <div class="main_con_sty">
            <el-table :data="tableData" :border="true" class="tabSty">
                <el-table-column prop="transactionAmount" label="收入/支出" width="150" />
                <el-table-column prop="makeWay" label="获取/消费方式" width="150" />
                <el-table-column prop="communityInfo" label="小区信息" width="420" />
                <el-table-column prop="createTime" label="时间" />
            </el-table>
            <div class="flex_cen" style="width: 100%;margin-top: 50px;">
                <el-config-provider :locale="locale">
                    <el-pagination v-model:current-page="params.current" v-model:page-size="params.size"
                        :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getMyShouCangFun"
                        @current-change="getMyShouCangFun" />
                </el-config-provider>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { getMyMoneyApi, generalAssetsApi } from '@/api/index/index'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
const total = ref(0)
const params = reactive({
    size: 10,
    current: 1
})
const myUpdateNum = ref({
    surplusCoin: 0,
    couponNum: 0,
})
const tableData = ref<any>()
const getMyShouCangFun = () => {
    getMyMoneyApi(params).then((res: any) => {
        tableData.value = res.data.records
        total.value = res.data.total
    })
}
const getMyStatistics = () => {
    generalAssetsApi().then((res: any) => {
        myUpdateNum.value = res.data
    })
}
onMounted(() => {
    getMyStatistics()
    getMyShouCangFun()
})
</script>
<style scoped>
:deep(.is-active) {
    background-color: #FF9D07 !important;
}

:deep(.el-pagination__sizes) {
    display: none !important;
}

.main_tab_sty {
    text-align: center;
    font-size: 18px;
    color: #A19EA8;
}

.main_tab_sty :first-child {
    color: #000;
    margin-bottom: 4px;
}

.mainSty {
    width: 80%;
    min-height: 500px;
}

.min_tit_sty {
    width: 100%;
    min-height: 120px;
    background-color: #fff;
    margin-bottom: 40px;
}

.main_con_sty {
    width: 100%;
    min-height: 500px;
    background-color: #fff;
    padding: 30px 20px;
    margin-bottom: 40px;
}
</style>